<template>
  <div class="page-container">
    <div class="content-wrapper">
      <div class="title">
        <h1>账 户 安 全 中 心</h1>
      </div>
      <el-card class="security-card" shadow="hover" v-for="item in items" :key="item.key">
        <div class="item-content">
          <div class="item-label">{{ item.label }}</div>
          <div class="item-value">{{ item.value || '未设置' }}</div>
          <el-button type="primary" size="mini" @click="goToDetail(item.key)">{{ item.value ? '修 改' : '设 置' }}
          </el-button>
        </div>
        <div>
          <span class="item-tip">{{ item.tip }}</span>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getInfo } from '@/api/user'
import RsaUtil from '@/utils/rsa-util'

export default {
  data() {
    return {
      items: [
        {
          key: 'account',
          label: '账户',
          value: '',
          tip: '账户是登录系统的凭据之一，可用于登录系统，不依赖手机号或邮箱。'
        },
        { key: 'password', label: '密码', value: '', tip: '密码用于保护您的账户安全，请勿泄露给他人。' },
        { key: 'phone', label: '手机号', value: '', tip: '手机号可用于接收验证码、找回密码及安全验证。' },
        { key: 'email', label: '邮箱', value: '', tip: '邮箱可用于接收系统通知、找回密码及安全验证。' }
      ]
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    async loadData() {
      const { publicKey, privateKey } = RsaUtil.generateKeyPair()
      const rsa = new RsaUtil(publicKey, privateKey)
      const res = await getInfo({ publicKey: publicKey })
      this.items = this.items.map(item => {
        switch (item.key) {
          case 'password':
            item.value = '********'
            break
          case 'email':
            item.value = res.email || ''
            break
          case 'phone':
            item.value = res.phone ? rsa.decrypt(res.phone) : ''
            break
          case 'account':
            item.value = res.account || ''
            break
        }
        return item
      })
    },
    goToDetail(key) {
      // 跳转到修改页，下一步可以做上一页/下一页导航
      this.$router.push({ path: `/security/${key}` })
    }
  }
}
</script>

<style scoped>
.page-container {
  display: flex;
  align-items: center; /* 顶部开始布局 */
  justify-content: center; /* 水平方向居中 */
  height: calc(100vh - 100px);
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden; /* 防止整体滚动 */
}

.content-wrapper {
  width: 100%;
  max-width: 600px;
  height: 100%;
  overflow-y: auto; /* 内部滚动 */
  padding-right: 10px; /* 给滚动条留空间 */
}

/* 卡片样式 */
.security-card {
  margin-bottom: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s;
}

.security-card:hover {
  transform: translateY(-2px);
}

/* 卡片内容 */
.item-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}

.item-label {
  font-weight: 600;
  width: 120px; /* 对齐主页面表单宽度 */
}

.item-value {
  flex: 1;
  margin-left: 10px;
  color: #333;
  word-break: break-all; /* 防止长字符串溢出 */
}

/* 按钮样式 */
.item-content .el-button {
  margin-left: 12px;
}

/* 滚动条美化（可选） */
.content-wrapper::-webkit-scrollbar {
  width: 6px;
}

.content-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.content-wrapper::-webkit-scrollbar-track {
  background-color: transparent;
}

.item-tip {
  font-size: 12px;
  color: #999; /* 浅灰色 */
  line-height: 1.4;
  padding: 0 16px;
}

.title{
  text-align: center;
}
</style>
